<template>
  <div>
    <h2>商品管理</h2>

    <el-table :data="$store.state.homeList" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <!-- name -->
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="价格" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.price }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="数量" width="280">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <!-- <p>住址: {{ scope.row.count }}</p> -->
            <div slot="reference" class="name-wrapper">
              <el-button
                size="mini"
                type="danger"
                @click="reduceNum(scope.row.id)"
                >减一</el-button
              >
              <el-tag size="medium">{{ scope.row.count }}</el-tag>
              <el-button size="mini" type="danger" @click="addNum(scope.row.id)"
                >加一</el-button
              >
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑数据"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
     
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
       <el-form-item label="用户名" prop="name">
          <el-input   type="text"  v-model="ruleForm2.name"></el-input>
        </el-form-item>
         
        <el-form-item label="价格" prop="price">
          <el-input  type="text" auto-complete="off"   v-model="ruleForm2.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input  type="text" auto-complete="off"  v-model="ruleForm2.count"></el-input>
        </el-form-item>
        
      
       
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerSure"
          >确 定</el-button >
      </span>
    </el-dialog>

    <h2>商品总价:{{ $store.getters.totalPrice }}元</h2>
  </div>
</template>

<script>
// import  {getHomeData } from '../api/index'

export default {
  data() {
     var checkCount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('数量不能为空'));
        }
        setTimeout(() => {
              let myval=parseInt(value)
              
          if (!Number.isInteger(myval)) {
            callback(new Error('请输入数字值'));
          }  else {
              callback();
            }
          
        }, 1000);
      };




      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
         
          callback();
        }
      };

       var validatePrice = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入价格'));
        } else {
         
          callback();
        }
      };


      


    return {

      dialogVisible:false,
      // count: 10
      // id: 11
      // name: "鱼香肉丝"
      // price: 12

      ruleForm2: {
          name: '',
          price: 0,
          count: 0
        },
        msg:'xxx',

        rules2: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          price: [
            { validator: validatePrice, trigger: 'blur' }
          ],
          count: [
            { validator: checkCount, trigger: 'blur' }
          ]
        },

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          price: 100,
          num: 111,
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  created() {},
  mounted() {
    //数据请求 放在vuex 的里面actions

    //  let homeArr=[]
    //  getHomeData().then(res=>{
    //   //  console.log(res)
    //    res.map(item => {
    // // console.log(item)
    // item.date=new Date().toLocaleDateString()
    //   // console.log(item)
    //   homeArr.push(item)

    //    });

    //    console.log(homeArr)

    //   this.tableData=homeArr

    //  })

    this.$store.dispatch("getHomeData");
  },

  // updated(){

  // },
  methods: {
    handleDelete(index, row) {
      // console.log(index)
      // console.log(row.id)
      this.$store.dispatch("deleteId", row.id);
    },
    reduceNum(id) {
      // alert(id)
      this.$store.dispatch("reduceCount", id);
    },
    addNum(id) {
      // alert(id)
      this.$store.dispatch("addCount", id);
    },

    handleEdit(index, row) {
      // alert(row.id);
      this.dialogVisible=true;
     let everyData= this.$store.state.homeList[index];
    //  console.log('every:',everyData)

      this.ruleForm2.name=everyData.name;
      this.ruleForm2.price=everyData.price;
      this.ruleForm2.count=everyData.count;
      this.ruleForm2.date=everyData.date,
      this.ruleForm2.id=everyData.id

   
    },


     
    handlerSure() {
   

               
               let price=   parseInt(this.ruleForm2.price)
               let count=   parseInt(this.ruleForm2.count)
                this.ruleForm2.price=price;
                this.ruleForm2.count=count;

                  console.log('ruleform:',this.ruleForm2)


    
      this.$store.dispatch('updateData',this.ruleForm2)
      this.dialogVisible=false

   
      
      
    },

     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    



  },
};
</script>

<style scoped>
</style>
